<html>
    <head>
        <title>访问子级组件或子组件的元素</title>
    </head>
    <body>
        <script>
            // 3、访问子组件实例或子元素
                                        /*
                                            尽管存在 prop 和 事件，有的时候你仍可能需要在JavaScript 里直接访问一个子组件。
                                            为了达到这个目的，你可以通过 ref 这个 atrribute (标签属性) 为组件赋予一个引用ID .

                                                 例如：
                                                         <base-input ref="usernameInput"></base-input>

                                            现在在你已经定义了ref的组件里，你可以使用：
                                                         （在<base-input>组件的父级组件中）：

                                                         this.$refs.usernameInput

                                            来访问这个<base-input> 实例，以便不时之需。 比如程序化地从一个父组件聚焦到这个输入框。
                                            在刚才那个例子中，该 <base-input>组件也可以使用一个类似的 ref attribute 来提供对<base-input>内部子元素的访问：
                                                例如：
                                                       ----在 <base-input> 组件的模板中----
                                                        <input ref="input">    
                                                        // 注意：  此引用是挂在<base-input>组件实例上的  (为组件声明的引用，总是挂在父级组件的实例上)
                                        */
                                         // 设置你可以在<base-input>组件中定义方法：
                                                // 在<base-input>组件声明中：
                                                methods:{
                                                    // 用来从父组件聚焦到ref="input"
                                                    focus:function(){
                                                        this.$refs.input.focus();
                                                    }
                                                }
                                         // 这样就允许你在<base-input>组件的父级组件中，通过下面代码聚焦 <base-input>中 ref="input"的输入框：
                                                this.$refs.usernameInput.focus();

                                         // 当 ref 和 v-for 一起使用的时候，你得到的 ref 将会是一个 "包含了对应数据源的这些子组件的数组"

                                         /*
                                            注意：
                                                $refs 只会在组件渲染完成之后生效，并且他们不是响应式的。
                                                这仅仅作为一个用来直接操作子组件的"逃生舱"----你应该"避免在模板"或"计算属性"中访问 $refs.
                                         */
        </script>
    </body>
</html>